How to Draw a Wireframe (Even if You Can’t Draw) 何繪製線框圖

逐步繪製指南 (Step-by-Step Sketching Guide)

以下是繪製線框圖的常見步驟，即使您沒有繪畫經驗，也可以快速上手：

第1步：確定瀏覽器視窗或裝置的縱橫比

手繪線框圖時無需精確，但對於更高精細度的線框圖，可參考以下尺寸：

網頁線框：1024x768畫素或1920x1080畫素。

移動端：根據裝置型別調整尺寸（如平板或不同尺寸的手機）。

為了提供上下文，可以加入瀏覽器工具欄或裝置按鈕等外觀元素。

第2步：繪製導航和搜尋

導航欄和搜尋框提供線框圖的框架和背景資訊：

如果使用現有設計模板，直接畫出已有的導航位置（如頂部導航欄）。

常見表示方式：

第3步：繪製設計中最大的元素

重點表現設計中的主要部分，如標題、大橫幅或主要圖片：

標題：用較粗的線條表示。

正文文字：用較細的線條表示。

圖片：用矩形並在中間畫一個“X”表示。

第4步：補充細節

這些細節通常包括互動元件，如按鈕、下拉框、核取方塊、單選按鈕或文字框：

• 下拉框： 矩形+倒三角圖示，可展開或收起。

• 核取方塊和單選按鈕： 分別用正方形或圓形表示，選中狀態分別用勾號或填充圓表示。

• 按鈕： 矩形中標註關鍵標籤，如“新增到購物車”。

• 橫幅： 一兩行文字和一個按鈕或取消圖示。

• 對話方塊： 標題、一到兩行正文文字，以及按鈕或取消圖示。

• 進度指示器： 用部分填充的圓角矩形表示剩餘等待時間。

示例：繪製產品詳情頁 (Sketching a Product-Detail Page)

步驟 1：由於我們的設計是針對桌面網頁的，我們從一個與常見瀏覽器視窗大小相對應的空白畫布開始。

新增導航和搜尋:繪製頂部導航欄和搜尋框。

繪製主要元素:重點表現產品資訊：標題、描述、主要圖片及縮圖。

補充細節:增加下拉選擇框和“新增到購物車”按鈕，併為按鈕標註標籤，強調其為主要操作。